import * as ol from '../openLayer'
import { markStypeDefaultConfig } from './config'
/**
 * mark 样式
 * @param {*} config：{
 *  legend：图例值，和坐标点mark point 的状态保持一致
 *  pointType： mark 点类型 CircleStyle： 小圆点，image： 使用外部图片，目前仅支持这两种样式，
 *  style:{ //  样式设置，聚合点使用内外圆+文字设置样式，，单点使用的是普通圆点样式 ，，
 *    // 公用属性
 *    url：  图片地址
 *    scale： 图片scale 大小
 *
 *    // 以下是 聚合点样式属性
 *    innerRadius： 内圆半径， 内圆是实心圆
 *    innerFillColor：内圆fill 颜色
 *    outerRadius：外圆半径，
 *    outerFillColor：外圆fill 颜色
 *    text： 文字提示
 *    textScale： 文字大小缩放
 *    textFillColor ： 文字fill 颜色
 *    textStrokeColor： 文字storke 颜色
 *    textStrokeWidth： 文字storke 宽度
 *    // 以下是单点样式属性
 *    radius：圆半径，
 *    fillColor：  圆 fill 颜色
 *    strokeColor： 圆storke 颜色
 *    strokeWidth： 圆storke 宽度
 *    size:  大小size
 *
 *   }
 * }
 * @param {*} type mark 模式 singleMark：单点模式，clusterMark：聚合点模式
 * @returns
 */
export function createMarksStyle (config = { pointType: 'CircleStyle', style: {} }, type = 'singleMark') {
  let style = {}
  if (type === 'singleMark') { //  单点
    Object.assign(style, markStypeDefaultConfig.singleMark.markConfig, config.style)
  } else if (type === 'clusterMark') { //  聚合
    Object.assign(style, markStypeDefaultConfig.clusterMark.markConfig, config.style)
  }
  if (config.pointType === 'CircleStyle') { // 圆点
    return markCircleStyle(style, type)
  } else if (config.pointType === 'image') { // 使用图片
    return markImageStyle(style)
  }
}

/**
 * 圆点
 * @param {*} config
 * @returns
 */
export function markCircleStyle (config, type = 'singleMark') {
  if (type === 'singleMark') {
    return new ol.Style({
      image: new ol.CircleStyle({
        radius: config.radius,
        fill: new ol.Fill({ color: config.fillColor }),
        stroke: new ol.Stroke({ color: config.strokeColor, width: config.strokeWidth }),
        size: [config.size, config.size]
      })

    })
  } else if (type === 'clusterMark') {
    // 内圆
    const innerCircle = new ol.CircleStyle({
      radius: config.innerRadius,
      fill: new ol.Fill({
        color: config.innerFillColor
      })
    })
    // 外圆
    const outerCircle = new ol.CircleStyle({
      radius: config.outerRadius,
      fill: new ol.Fill({
        color: config.outerFillColor
      })
    })
    return [
      new ol.Style({
        image: outerCircle
      }),
      new ol.Style({
        image: innerCircle,
        text: new ol.Text({
          text: config.text,
          scale: config.textScale,
          fill: new ol.Fill({
            color: config.textFillColor
          }),
          stroke: new ol.Stroke({
            color: config.textStrokeColor,
            width: config.textStrokeWidth
          })
        })
      })
    ]
  }
}
/**
 * 图片
 * @param {*} config
 * @returns
 */
export function markImageStyle (config) {
  return new ol.Style({
    image: new ol.Icon({
      src: config.url,
      scale: config.scale
    })
  })
}
